<template>
  <div class="container" @onmouseup="onmouseup">企业平台日记 {{ value1 }}</div>
  <div class="slider">
    <el-slider v-model="value1" @mouseup="onmouseup"></el-slider>
    <div class="slider_zh">请拖动滑块完成上方拼图</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref(0)
const onmouseup = (e) => {
  console.log(e, 123)
}
</script>

<style lang="scss" scoped>
:deep(.el-slider__bar) {
  height: 40px;
}
:deep(.el-slider__runway) {
  height: 40px;
}
:deep(.el-slider__button-wrapper) {
  top: -4px;
  width: 60px;
  height: 48px;
  transform: translateX(0);
  z-index: 101;
  background-image: url(@/assets/img/slider.png);
  background-size: 100% 100%;
  box-shadow: 0px 1px 6px 0px rgba(66, 69, 73, 0.36);
  border-radius: 2px;
  .el-slider__button {
    display: none !important;
  }
}
:deep(.el-slider) {
  height: 40px;
}
.slider {
  position: relative;
  width: 400px;
  height: 40px;
  .slider_zh {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 10;
  }
}
</style>
